<template>
	<view class="order-map-box" v-if="isLoad">
		<map class="order-map radius-16" :show-location="false" :controls="[]" scale="16" :latitude="latitude"
			:longitude="longitude" :enable-poi="true" :markers="markers" :polyline="polyline">
			<!-- #ifdef MP-WEIXIN -->
			<cover-view slot="callout">
				<template v-for="(item,index) in markers">
					<cover-view :marker-id="item.id" class="flex-column flex-center">
						<cover-view class="callout-box radius-10" style="background: rgba(67,169,96, 0.7); padding: 8px;">
							<cover-view class="title c-base f-paragraph text-bold">
								{{$t('action.attendantName')}}正在赶路
							</cover-view>
							<cover-view class="title c-base f-desc pt-sm">
								距您 {{distance}}km {{duration}}分钟
							</cover-view>
						</cover-view>
						<cover-view class="radius rel pt-sm flex-column flex-center">
							<cover-image :src="work_img" class="radius box-shadow" style="width: 35px;height: 35px;border: 3px solid #fff;"></cover-image>
							<cover-image style="width: 15px;height: 15px;margin-top: -12rpx;" src="https://www.peikangbao.cn/admin/anmo/order/marker-icon.png"></cover-image>
						</cover-view>
					</cover-view>
				</template>
			</cover-view>
			<!-- #endif -->
		</map>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from "vuex"
	export default {
		name: 'orderMap',
		props: {
			info: {
				type: Object,
				default () {
					return {}
				}
			}
		},
		created() {
			
		},
		mounted() {
			let {
				coach_info: {
					work_img = '',
					lat: coach_lat = 0,
					lng: coach_lng = 0
				},
				address_info: {
					lat = 0,
					lng = 0,
					//coach_lat = 0,
					//coach_lng = 0
				}
			} = this.info
			this.markers[0].latitude = coach_lat * 1
			this.markers[0].longitude = coach_lng * 1
			// #ifndef MP-WEIXIN
			this.markers[0].iconPath = work_img
			this.markers[0].width = 30
			this.markers[0].height = 30
			// #endif
			this.work_img = work_img
			this.markers[1].latitude = lat * 1
			this.markers[1].longitude = lng * 1
			this.latitude = coach_lat * 1
			this.longitude = coach_lng * 1
			this.getDriving(coach_lng*1, coach_lat*1, lng*1, lat*1)
		},
		data() {
			return {
				isLoad: false,
				work_img: '',
				latitude: 0,
				longitude: 0,
				distance: 0,
				duration: 0,
				polyline: [{
					points: [],
					arrowLine: true,
					color: "#33c9FFDD",
					width: 6,
					dottedLine: false
				}],
				markers: [{
						// callout: {
						// 	content: `工作者正在赶路 \n 距您 3.5km 30分钟`,
						// 	color: '#fff',
						// 	fontSize: 14,
						// 	bgColor: 'rgba(67,169,96, 0.7)',
						// 	display: 'ALWAYS',
						// 	borderRadius: 8,
						// 	padding: 8
						// },
						customCallout: {  
						  anchorY: 20,  
						  anchorX: 0,  
						  display: 'ALWAYS'  
						},
						id: 0,
						latitude: 0, // 30.664757085017175
						longitude: 0, // 104.11588668823242
						iconPath: `https://www.peikangbao.cn/admin/anmo/order/marker-icon.png`,
						width: 1,
						height: 1,
						//alpha: 0
					},
					{
						id: 1,
						latitude: 0, // 30.62724485305499
						longitude: 0, // 104.05271530151367
						iconPath: `https://www.peikangbao.cn/admin/anmo/coachport/map-position.png`,
						width: 30,
						height: 40,
					}
				],
			}
		},
		computed: mapState({}),
		methods: {
			async getDriving(startlang, startlat, endlng, endlat) {
				let data = await this.$api.order.getDriving({
					start_lang: startlang,
					start_lat: startlat,
					end_lng: endlng,
					end_lat: endlat
				})
				if (data && data.message) {
					if(this.info.car_type == 1){ // 出租车规划线路
						let coors = data.result.routes[0].polyline
						let arr = [{
							longitude: coors[1],
							latitude: coors[0]
						}]
						let latitude = 0
						for (var i = 2; i < coors.length; i++) {
							coors[i] = coors[i - 2] + coors[i] / 1000000
							if(i % 2 == 0){
								latitude = coors[i]
							}else{
								arr.push({
									longitude: coors[i],
									latitude: latitude
								})
							}
						}
						this.polyline[0].points = arr
					}
					
					this.distance = (data.result.routes[0].distance / 1000).toFixed(1)
					this.duration = data.result.routes[0].duration
					// #ifndef MP-WEIXIN
					this.markers[0].callout = {
						content: `工作者正在赶路 \n 距您 ${this.distance}km ${this.duration}分钟`,
						color: '#fff',
						fontSize: 14,
						bgColor: 'rgba(67,169,96, 0.7)',
						display: 'ALWAYS',
						borderRadius: 8,
						padding: 8
					}
					// #endif
					this.isLoad = true
				}
			}
		},
	}
</script>


<style>
	.order-map {
		width: 690rpx;
		height: 340rpx;
	}
	.order-map-box{
		border-radius: 16rpx;
		overflow: hidden;
		border: 2px solid #fff;
	}
</style>